{% extends "base.html" %}
{% load gross from prices_i18n %}
{% load i18n %}
{% load staticfiles %}
{% load render_bundle from webpack_loader %}
{% load get_thumbnail from product_images %}

{% block title %}{% trans "Your cart" context "Cart page title" %} — {{ block.super }}{% endblock %}

{% block breadcrumb %}
<ul class="breadcrumbs list-unstyled">
  <li><a href="/">{% trans "Home" context "Main navigation item" %}</a></li>
  <li><a href="{% url 'cart:index' %}">{% trans "Cart" context "Cart breadcrumb" %}</a></li>
</ul>
{% endblock breadcrumb %}

{% block content %}
<div class="alert alert-success hidden-xs-up remove-product-alert">
  {% trans "Product has been deleted from cart" context "Cart message" %}
  <button type="button" class="close close-msg" aria-hidden="true">&times;</button>
</div>
<div class="cart">
  {% if cart_lines %}
    <div class="table__header hidden-sm-down">
      <div class="row">
        <div class="col-md-7">
          <small>{% trans "Product" context "Cart table header" %}</small>
        </div>
        <div class="col-md-3">
          <small>{% trans "Quantity" context "Cart table header" %}</small>
        </div>
        <div class="col-md-2 text-right">
          <small>{% trans "Price" context "Cart table header" %}</small>
        </div>
      </div>
    </div>
    {% for line in cart_lines %}
      <div class="cart__line{% if forloop.last %} last{% endif %} table__row">
        <div class="row">
          <div class="col-7 cart__line__product">
            <a class="link--clean" href="{{ line.variant.get_absolute_url }}">
              <img src="{% get_thumbnail line.variant.product.images.first.image method="crop" size="60x60" %}" 
                   srcset="{% get_thumbnail line.variant.product.images.first.image method="crop" size="60x60" %} 1x, {% get_thumbnail line.variant.product.images.first.image method="crop" size="120x120" %} 2x" 
                   alt="">
              <p>{{ line.variant.product }}
                <br><small>{{ line.variant }}</small></p>
            </a>
          </div>
          <div class="col-5">
            <div class="row">
              <div class="cart__line__quantity col-md-7 col-12">
                <form role="form" action="{% url "cart:update-line" variant_id=line.variant.pk %}" method="post" class="form-cart">
                  <div class="{% if form.quantity.errors %} has-error{% endif %}" tabindex="-1">
                    {{ line.form.quantity }}
                  </div>
                  {% csrf_token %}
                </form>
                <span class="cart-item-delete">
                  <svg data-src="{% static "images/delete.svg" %}" height="20px" width="20px" />
                </span>
                <small class="cart__line__quantity-error text-danger"></small>
              </div>
              <div class="cart-item-subtotal col-md-5 col-12" data-product-id="{{ line.variant.pk }}">
                <p class="text-right">{% gross line.get_total html=True %}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
    <div class="cart__total">
      <div class="row">
        <div class="col-8 cart__total__subtotal">
          <h3>{% trans "Subtotal" context "Order subtotal" %}</h3>
          <p>{% trans "(Delivery calculated at checkout)" context "Cart totals help text" %}</p>
        </div>
        <div class="col-4">
          <p class="cart-total text-right"
             data-value="{% gross cart_total %}"
             {% if local_cart_total %}data-value-local="{% gross local_cart_total %}"{% endif %}>
            {% spaceless %}
              {% gross cart_total html=True %}
              {% if local_cart_total %}
                <br>
                <small>
                  &asymp;
                  {% gross local_cart_total html=True %}
                </small>
              {% endif %}
            {% endspaceless %}
          </p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <a href="{% url "checkout:login" %}" class="btn primary float-md-right">
          {% trans "Checkout" context "Cart primary action" %}
        </a>
      </div>
    </div>
    <div class="cart__delivery-info">
      <h3><small>{% trans "Calculate shipping cost" context "Cart secondary title" %}</small></h3>
      <div class="col-md-8 col-lg-6 col-xl-5">
        <div class="cart__delivery-info__list row">
          <div class="deliveryform" data-csrf="{{ csrf_token }}">
            {{ country_form }}
          </div>
          <div class="col-6 cart__delivery-info__method">
            {% for option in default_country_options %}
              <p>{{ option.shipping_method__name }}</p>
            {% endfor %}
          </div>
          <div class="col-6 cart__delivery-info__price">
            {% for option in default_country_options %}
              <p class="text-right">{% gross option.price html=True %}</p>
            {% endfor %}
          </div>
        </div>
      </div>
    </div>
  {% else %}
    <div class="cart__empty">
      <img src="{% static 'images/pirate_cart.png' %}"
           srcset="{% static 'images/pirate_cart.png' %} 1x, {% static 'images/pirate_cart2x.png' %} 2x">
      <h2>{% trans "There are no products in your shopping cart." context "Empty cart message" %}</h2>
      <a href="/" class="btn primary">{% trans "Check out our sales" context "Empty cart link" %}</a>
    </div>
  {% endif %}
</div>
{% endblock content %}
